<template>
  <div class="containers">
    <div class="progress">
      <div ref="progress" class="progress-bar"></div>
      <div ref="global" class="globals"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MiniProgress",
  methods: {
    moveProgress(length) {
      this.$refs.global.style.left = `${length}px`
      this.$refs.progress.style.width = `${length + 15}px`
    }
  }
};
</script>

<style lang="scss" scoped>
@import "common/scss/mixin.scss";
.containers {
  @include display-r;
  height: 50px;
  align-items: center;
  .progress {
    position: relative;
    width: 170px;
    height: 15px;
    border-radius: 15px;
    background: rgba(168, 168, 168, 0.7);
    .progress-bar {
      position: absolute;
      top: 0;
      width: 0;
      bottom: 0;
      border-radius: 15px;
      background: #fff;
    }
    .globals {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      transform: translateY(-26%);
      background: #fff;
    }
  }
}
</style>